axios.get('/student/overview').then(({ data: res }) => {
  // console.log(res)
  const { code, message, data: { avgAge, avgSalary, proportion, total } } = res
  document.querySelector('.avgAge').innerHTML = avgAge
  document.querySelector('.avgSalary').innerHTML = avgSalary
  document.querySelector('.proportion').innerHTML = proportion
  document.querySelector('.total').innerHTML = total
})


// 获取学员信息
axios.get('/student/list').then(({ data: res }) => {
  console.log(res)
  // 声明数组把数据接过来
  // 线型图数据
  const Xname = []
  const Salary = []
  const trueSalary = []
  // 地图数据
  // 里面一开始就有一个北京数据
  const chinaGeoCoordMap = { '北京市': [116.4551, 40.2539], }
  const chinaDatas = []
  // 先声明一个数组
  const pieData = []
  res.data.forEach(item => {
    // 线型图的数据
    Xname.push(item.name)
    Salary.push(item.salary)
    trueSalary.push(item.truesalary)

    // 地图数据
    chinaGeoCoordMap[item.province] = [item.jing, item.wei]
    chinaDatas.push([{ name: item.province, value: 0 }])

    // 饼状图的数据
    // 判断pieDate里面是否有相同的省份，   如果  i.name !== item.province  index值会为 - 1
    const index = pieData.findIndex(i => i.name === item.province)   //index就是在pieDate数组中的索引号
    if (index > -1) { //大于-1.说明pieData数组中有这个数组  
      pieData[index].value += 1
    } else {
      pieData.push({ value: 1, name: item.province })    // 如果没有就把该数据添加进去
    }
  })
  console.log(pieData)
  pieChart(pieData)
  lineChart(Xname, Salary, trueSalary)
  // console.log(chinaDatas)
  // console.log(chinaGeoCoordMap)
  mapChart(chinaGeoCoordMap, chinaDatas)

})

//饼状图
// const MyChart = echarts.init(document.querySelector())
// const option = {}
// MyChart.setOption(option)

// 封装函数
// function pieChart() {
//   const MyChart = echarts.init(document.querySelector())
//   const option = {}
//   MyChart.setOption(option)

// }
// 使用立即执行函数
function pieChart(pieData) {
  const MyChart = echarts.init(document.querySelector('.pie'))
  const option = {
    title: {
      text: '籍贯 HomeTown ',
      textStyle: {
        color: '#6d767e'
      }
    },
    tooltip: {
      // show: true,
      formatter: `{a} <br/> {b} <strong>{c}</strong>人 占比{d}%`
    },
    series: [
      {
        // 图形名称
        name: '各地学院分布',
        // 类形
        type: 'pie',
        // 半径
        // 第一个数组的值是内部圆的半径
        // 第一个数组的值是外部圆的半径
        radius: [40, 170],
        // 圆的中心点位置
        center: ['50%', '50%'],
        // roseType: area | radius
        //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
        //'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
        roseType: 'radius',
        // 扇区样式
        itemStyle: {
          borderRadius: 8
        },
        // 数据
        data: pieData
      }
    ]
  }

  MyChart.setOption(option)
}

//线性图
function lineChart(Xname, Salary, trueSalary) {
  const Mychart = echarts.init(document.querySelector('.line'))
  const option = {
    legend: {
      top: 20,
      data: ['期望薪资', '实际薪资'],
    },
    color: ['#ee6666', 'skyblue'],
    tooltip: {
      trigger: 'axis', // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], '10%'];
      }
    },
    // 标题
    title: {
      left: 'left',
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: Xname
    },
    yAxis: {
      type: 'value',
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '100%'],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    // 数据部分
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 表示使用平滑曲线
        symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        // itemStyle: { // 单独控制这条线的颜色
        //   // color: '#ee6666'
        // },
        data: Salary
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        // itemStyle: { // 单独控制这条线的颜色
        //   // color: '#5470c6'
        // },
        data: trueSalary
      }
    ]
  }
  Mychart.setOption(option)
}
//柱状图
let flag = 'none'
document.querySelector('.bar .btn').addEventListener('click', function () {
  if (flag === 'none') {
    document.querySelector('#batch').style.display = 'block'
    flag = 'block'
  }
  else {
    document.querySelector('#batch').style.display = 'none'
    flag = 'none'
  }
})
//batch 中的li 分别绑定点击事件
const lis = document.querySelectorAll('#batch li')
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function () {
    // 方案一： 给每个小li 设置自定义属性
    // lis[i].setAttribute('data-index', i + 1)
    // 方案二： 每个小li 相当于是一个对象  给每个对象添加了一个index属性
    // lis[i].index = i + 1
    //方案三 ： 作用域链  直接拿到 i
    //  拿到每一组的成绩相关数据
    // console.log(i)
    axios.get('/score/batch', { params: { batch: `${i + 1}` } }).then(({ data: res }) => {
      // console.log(res)
      const { code, message, data: { avgScore, group, gt60, gt80, lt60 } } = res
      barChart(avgScore, group, gt60, gt80, lt60)
    })
  })
}
// 每次一进入页面 直接拿到第一组数据 ，就是点击第一个小li 
lis[0].click()

function barChart(avgScore, group, gt60, gt80, lt60) {
  const Mychart = echarts.init(document.querySelector('.barChart'))
  const option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    color: ['skyblue', 'lightgreen', 'orange', '#ee6668'],
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
      axisPointer: {   // 坐标轴指示器配置项
        // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // 图例
    legend: {
      top: 5,
      data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数',]
    },
    // X轴
    xAxis: [
      {
        type: 'category',
        data: group,
        axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
          type: 'shadow'
        }
      }
    ],
    // Y轴
    yAxis: [
      {
        type: 'value',
        min: 0, // y轴数据最小值
        max: 100, // y轴数据最大值
        interval: 10, // step步长，把y轴的数据分成多少份
        axisLabel: { // Y轴文字设置
          formatter: '{value}分', // Y轴文字
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    // 数据部分（4组数据）
    series: [
      {
        name: '平均分',
        type: 'bar',
        data: avgScore,
        barWidth: '15',
      },
      {
        name: '低于60分人数',
        type: 'bar',
        data: lt60,
        barWidth: '15',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: gt60,
      }
      ,
      {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: '15',
        data: gt80
      }
    ]
  }
  Mychart.setOption(option)
}

//地图
// 1.引入中国地图



function mapChart(chinaGeoCoordMap, chinaDatas) {
  const MyChart = echarts.init(document.querySelector('.map'))
    // var chinaGeoCoordMap
    // {
    // '黑龙江': [127.9688, 45.368],
    // '内蒙古': [110.3467, 41.4899],
    // "吉林": [125.8154, 44.2584],
    // '北京市': [116.4551, 40.2539],
    // "辽宁": [123.1238, 42.1216],
    // "河北": [114.4995, 38.1006],
    // "天津": [117.4219, 39.4189],
    // "山西": [112.3352, 37.9413],
    // "陕西": [109.1162, 34.2004],
    // "甘肃": [103.5901, 36.3043],
    // "宁夏": [106.3586, 38.1775],
    // "青海": [101.4038, 36.8207],
    // "新疆": [87.9236, 43.5883],
    // "西藏": [91.11, 29.97],
    // "四川": [103.9526, 30.7617],
    // "重庆": [108.384366, 30.439702],
    // "山东": [117.1582, 36.8701],
    // "河南": [113.4668, 34.6234],
    // "江苏": [118.8062, 31.9208],
    // "安徽": [117.29, 32.0581],
    // "湖北": [114.3896, 30.6628],
    // "浙江": [119.5313, 29.8773],
    // "福建": [119.4543, 25.9222],
    // "江西": [116.0046, 28.6633],
    // "湖南": [113.0823, 28.2568],
    // "贵州": [106.6992, 26.7682],
    // "云南": [102.9199, 25.4663],
    // "广东": [113.12244, 23.009505],
    // "广西": [108.479, 23.1152],
    // "海南": [110.3893, 19.8516],
    // '上海': [121.4648, 31.2891]
    // }
    ;
  // var chinaDatas = 
  //   [
  //   [{
  //     name: '黑龙江',
  //     value: 0
  //   }], [{
  //     name: '内蒙古',
  //     value: 0
  //   }], [{
  //     name: '吉林',
  //     value: 0
  //   }], [{
  //     name: '辽宁',
  //     value: 0
  //   }], [{
  //     name: '河北',
  //     value: 0
  //   }], [{
  //     name: '天津',
  //     value: 0
  //   }], [{
  //     name: '山西',
  //     value: 0
  //   }], [{
  //     name: '陕西',
  //     value: 0
  //   }], [{
  //     name: '甘肃',
  //     value: 0
  //   }], [{
  //     name: '宁夏',
  //     value: 0
  //   }], [{
  //     name: '青海',
  //     value: 0
  //   }], [{
  //     name: '新疆',
  //     value: 0
  //   }], [{
  //     name: '西藏',
  //     value: 0
  //   }], [{
  //     name: '四川',
  //     value: 0
  //   }], [{
  //     name: '重庆',
  //     value: 0
  //   }], [{
  //     name: '山东',
  //     value: 0
  //   }], [{
  //     name: '河南',
  //     value: 0
  //   }], [{
  //     name: '江苏',
  //     value: 0
  //   }], [{
  //     name: '安徽',
  //     value: 0
  //   }], [{
  //     name: '湖北',
  //     value: 0
  //   }], [{
  //     name: '浙江',
  //     value: 0
  //   }], [{
  //     name: '福建',
  //     value: 0
  //   }], [{
  //     name: '江西',
  //     value: 0
  //   }], [{
  //     name: '湖南',
  //     value: 0
  //   }], [{
  //     name: '贵州',
  //     value: 0
  //   }], [{
  //     name: '广西',
  //     value: 0
  //   }], [{
  //     name: '海南',
  //     value: 0
  //   }], [{
  //     name: '上海',
  //     value: 0
  //   }]
  // ]
  ;

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['北京市', chinaDatas]].forEach(function (item, i) {
    console.log(item)
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });
  const option = {
    // 标题
    title: {
      // left: 'center',
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      }
    },
    backgroundColor: "#fff",
    visualMap: { // 图例值控制（官方叫做视觉映射组件）
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  MyChart.setOption(option)
}